<template>
	<div class="app-header">
		<div class="wrapper content">
			<div class="content-left">
				<nuxt-link to="/" class="link">
					<span>OPPO官网</span>
				</nuxt-link>

				<nuxt-link to="/onePlus" class="link">
					<span>一加官网</span>
				</nuxt-link>
			</div>
			<div class="content-right">
				<nuxt-link to="" class="link download">
					<span>下载OPPO商场App</span>
					<div class="app">
						<img class="ecode" src="@/assets/images/ecode.png" alt="下载oppo商场二维码" />
						<div class="name">扫码下载oppe商城App</div>
					</div>
				</nuxt-link>

				<nuxt-link to="/login" class="link" target="_blank">
					<i class="iconfont icon-user"></i>
					<span>登录</span>
				</nuxt-link>

				<nuxt-link to="/register" class="link" target="_blank">
					<span>注册</span>
				</nuxt-link>

				<nuxt-link to="" class="link">
					<i class="iconfont icon-shoppingcart"></i>
					<span>购物车 </span>
					<span>(0)</span>
				</nuxt-link>
			</div>
		</div>
	</div>
</template>

<script setup></script>

<style lang="scss" scoped>
	.app-header {
		background-color: #000;
		height: $appHeaderHeight;
		/* 吸顶 */
		@include elementSticky(0, 110);

		.link span {
			opacity: 0.8; // 字体变暗
		}

		.content {
			/* @include border(green); */
			/* box-sizing: border-box; */
			height: 100%;
			@include normalFlex();

			.content-left {
				@include normalFlex();
				justify-content: flex-start;
				align-items: center;
				.link {
					color: #fff;
					font-size: 12px;
					margin-right: 24px;
					text-decoration: none;
					cursor: pointer;
				}
			}

			.content-right {
				/* color: red; */
				@include normalFlex();
				justify-content: flex-end;
				align-items: center;
				.link {
					color: white;
					text-decoration: none;
					height: 14px;
					line-height: 14px;
					padding: 0 14px;
					border-right: 1px solid #fff;
					font-size: 12px;
					cursor: pointer;
					i {
						margin-right: 6px;
					}
					.icon-user {
						font-size: 12px;
						opacity: 1;
					}
					.icon-shoppingcart {
						font-size: 15px;
						opacity: 1;
					}
				}

				.link:last-child {
					border-right: 1px solid #000;
				}

				.download {
					position: relative;
					.app {
						/* 默认隐藏 */
						display: none;
						position: absolute;
						top: 25px;
						left: 0;
						padding: 8px;
						box-shadow: 0 4px 8px 0 rgb(0 0 0 / 10%);
						z-index: 10000;
					}

					.ecode {
						width: 140px;
						height: 140px;
					}
					.name {
						color: #000;
						margin-top: 2px;
					}
				}

				.download:hover .app {
					display: block;
				}
			}
		}
	}
</style>
